<template>
  <div class="container">
    <div class="left-container">
      <div class="search">
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="Please Input"
          :prefix-icon="Search"
        />
      </div>

      <div class="device-list">
        <el-collapse v-model="activeName" accordion class="el-collapse-item">
          <el-collapse-item class="el-collapse-item" title="xxx报警设备" name="1">
            <div v-for="(item, index) in deviceList" :key="index" class="device-item">
              <el-button text @click="handleClick(item)">{{ item.desc }}</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="right-container">
      <div class="tool-box" v-for="(item, index) in deviceInfo" :key="index">
        <v3-drag-zoom-container
          v-if="currentImg == item.id"
          ref="zoomContainer"
          style="width: 1000px; height: 100%; background-color: #f5f5f5"
          :followPointer="false"
          :minZoom="0.5"
          :maxZoom="2"
          :zoomFactor="0.1"
          :draggable="false"
          :autoResize="true"
          :key="componentKey"
        >
          <img
            class="demo-img"
            :src="`/static/demo${currentImg}.jpg`"
            alt="Demo"
            style="width: 100%"
          />
          <v3-drag-zoom-item
            v-for="(point, idx) in item.point"
            :key="idx"
            :position="point.position"
            :draggable="true"
            @click="onMove(point)"
            @onMoveFinished="onMoveFinished"
          >
            <div>
              <div>
                <img style="width: 40px; height: 40px" src="/static/location.png" alt="" />
              </div>
              {{ point.label }}
            </div>
          </v3-drag-zoom-item>
        </v3-drag-zoom-container>
      </div>
      <div>
        <el-button @click="addDevice"> 添加设备 </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { VueDraggable } from 'vue-draggable-plus'
const input = ref(''),
  currentImg = ref(1),
  zoomContainer = ref(null),
  componentKey = ref(0)
const deviceList = ref([
  { desc: '1号报警设备', id: 1 },
  { desc: '2号报警设备', id: 2 }
])

const deviceInfo = ref([
  {
    id: 1,
    point: [
      { label: '报警器1号', position: { x: 28.8, y: 57 } },
      { label: '警报器2号', position: { x: 64.6, y: 31 } }
    ]
  },
  {
    id: 2,
    point: [
      { label: '报警器1号', position: { x: 22.6, y: 65.5 } },
      { label: '警报器2号', position: { x: 44.2, y: 58.4 } },
      { label: '警报器3号', position: { x: 52.6, y: 68.6 } }
    ]
  }
])

// 添加设备
const addDevice = () => {
  const temp = deviceInfo.value[currentImg.value - 1].point
  temp.push({
    label: `报警器${temp.length + 1}号`,
    position: { x: 0, y: 0 }
  })
  componentKey.value += 1
  console.log(deviceInfo.value)
}
const handleClick = (data) => {
  currentImg.value = data.id
}

const onMoveFinished = (e) => {
  console.log(e)
}

const onMove = (point) => {
  console.log(point)
  
}
</script>

<style lang="scss" scoped>
.v3-drag-zoom-item {
  z-index: 10;
}
.container {
  padding: 20px;
  display: flex;
  .left-container {
    width: 200px;

    .device-list {
      margin-top: 20px;
      //   padding: 20px;
      height: calc(100vh - 100px);
      background-color: #fff;

      .device-item {
        text-align: center;
      }
    }
  }

  .right-container {
    width: calc(100% - 200px);
    height: 100%;

    .tool-box {
      height: 100%;
      position: relative;
      .demo-img {
        width: 1000px;
        height: 800px;
      }
      .demo-img {
        width: 100%;
        height: auto;
      }

      .location-item {
        position: absolute;
      }

      .location-img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.draggable-content {
  cursor: pointer;
  img {
    width: 100px;
    height: 100px;
  }
}

.dropped-content {
  position: absolute;
  transform-origin: top left;
  user-select: none;
  // pointer-events: none; /* 防止干扰缩放操作 */
  img {
    width: 100px;
    height: 100px;
  }
}
.drag-zoom {
  position: relative;
  margin: 100px auto;
  background-color: lightblue;
  overflow: hidden;
  .drag-zoom-content {
    width: 150px;
    height: 150px;
    background: #ff000099;
  }
}
</style>
